<template>
    <div class="home"  >
        <!-- 定义图表外层容器 -->
        <div id="myHomeChart" ref="homeEcharts"></div>
    </div>
</template>
<script>
import axios from 'axios';
import * as echarts from 'echarts';

export default {
    data() {
        return {}
    },
    mounted() {
        // 调用当前图表
        this.fetchChartData(); // 确保在挂载时获取数据
    },
    methods: {
        // 从后端获取图表数据
        fetchChartData() {
            axios.get('/api/chartdata')
                .then(response => {
                    console.log('response.data', response.data); // 确认数据
                    this.dataChart(response.data.data); // 将数据传递给dataChart
                })
                .catch(error => {
                    console.error('获取图表数据失败:', error);
                });
        },
        // 绘制图表
        dataChart(data) {
            // 初始化图表，this.$refs.homeEcharts获取到图表容器
            var myChart = echarts.init(this.$refs.homeEcharts);

            // 处理后端数据
            const positionData = data.map(item => ({
                value: item.positioncount,
                name: item.position
            }));
            
            const departmentData = data.map(item => ({
                value: item.departmentidcount,
                name: item.departmentname
            }));
            console.log("departmentData",departmentData)




            // 初始化配置
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: positionData.map(item => item.name) // 使用后端数据的部门名称
                },
                series: [
                    {
                        name: '员工职位',
                        type: 'pie',
                        radius: ['40%', '55%'],
                        label: {
                            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                            backgroundColor: '#eee',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                a: {
                                    color: '#999',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                hr: {
                                    borderColor: '#aaa',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                b: {
                                    fontSize: 16,
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#eee',
                                    backgroundColor: '#334455',
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        },
                        data: positionData // 使用处理后的数据
                    },
                    {

                        name: '部门信息',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: [0, '30%'],
                        label: {
                            position: 'inner',
                            fontSize: 14
                        },
                        labelLine: {
                            show: false
                        },
                        data: departmentData


                     
                    },
                ]
            }
            // 把参数配置放到容器里
            myChart.setOption(option);
        },
        // 销毁实例(看项目需要进行销毁实例)
        destroyChart() {
            this.$echarts.init(this.$refs.homeEcharts).dispose();
        }
    }
}
</script>
<style>
/* 给图表容器定义宽高 */
#myHomeChart {
    width: 800px;
    height: 800px;
}
</style>